<template>
    <div>
        <el-divider content-position="left">停车价格</el-divider>

        <!-- 计费价格表格 -->
        <el-table :data="tableData" border style="width: 100%; font-size:16px;">
            <el-table-column prop="detail" label="收费标准(元/半小时)">
            </el-table-column>
            <el-table-column prop="vip" label="会员(九折)">
                <template slot-scope="scope">
                    {{ scope.row.normal == 1 ? (price.price1 * 0.9).toFixed(1) : scope.row.normal == 2 ? (price.price2 *
                            0.9).toFixed(1) :
                            scope.row.normal === 3 ? (price.price3 * 0.9).toFixed(1) : 0
                    }} 元/半小时
                </template>
            </el-table-column>
            <el-table-column prop="normal" label="非会员">
                <template slot-scope="scope">
                    {{ scope.row.normal == 1 ? price.price1 : scope.row.normal == 2 ? price.price2 : scope.row.normal ==
                            3 ? price.price3 : 0
                    }} 元/半小时
                </template>
            </el-table-column>
        </el-table>
        <el-divider content-position="left">预定车位价格</el-divider>
        <!-- 预定车位价格信息 -->
        <el-card shadow="never">
            <div slot="header" class="clearfix">
                <span>预定车位价格</span>
            </div>
            <div>
                <el-tag style="font-size:large;">{{ price.price4 }}</el-tag> ￥/天
            </div>
        </el-card>

        <!-- 修改价格按钮 -->
        <div class="price-btn">
            <span>修改价格：</span>
            <el-button type="warning" @click="dialogFormVisible = true;">修改</el-button>
        </div>

        <!-- 二级密码验证弹出框 -->
        <el-dialog title="二级密码验证" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="请输入二级密码" label-width="120px">
                    <el-input show-password v-model="SecondPwd" autocomplete="off" placeholder="请输入二级密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改价格弹出框 -->
        <el-dialog title="修改价格" :visible.sync="dialogFormVisible_price">
            <el-form>
                <el-form-item label="30分钟-3小时" label-width="120px">
                    <el-input v-model="price.price1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="3小时-8小时" label-width="120px">
                    <el-input v-model="price.price2" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="8小时以上" label-width="120px">
                    <el-input v-model="price.price3" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预定车位价格" label-width="120px">
                    <el-input v-model="price.price4" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_price = false">取 消</el-button>
                <el-button type="primary" @click="updatePrice">确定修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    inject: ['reload'],
    data() {
        return {
            price: {
                id: 1,
                price1: 1.2,
                price2: 1,
                price3: 0.8,
                price4: 15,
            },
            tableData: [
                { detail: '30分钟以内', vip: 0, normal: 0 },
                { detail: '30分钟-3小时', vip: 0, normal: 1 },
                { detail: '3小时-8小时', vip: 0, normal: 2 },
                { detail: '8小时以上', vip: 0, normal: 3 },
            ], //价格数据
            SecondPwd: '',
            dialogFormVisible: false,
            dialogFormVisible_price: false
        }
    },
    methods: {
        updatePrice() {
            // 修改价格事件
            this.$confirm('确定修改?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.priceApi.setPrice(this.price).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.dialogFormVisible_price = false;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });
        },
        onSubmit() {
            if (this.SecondPwd.trim() == '') return;
            this.$http.verifyPwd.verify_pwd({ owner: 'master' }).then(res => {
                if (this.SecondPwd == res.data.data[0].second_pwd) {
                    this.$message({
                        message: '验证成功',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    this.dialogFormVisible_price = true;
                } else {
                    this.$message.error('密码有误，请重试！');
                    this.SecondPwd = '';
                }
            })
        }
    },

    mounted() {
        this.$http.priceApi.pueryPrice().then(res => {
            this.price = res.data.data[0];
        })
    },
}
</script>

<style lang="scss" scoped>
.price-btn {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: flex-end;

    >span {
        color: red;
    }

    >button {
        font-size: 1rem;
    }
}
</style>